<template>
  <div class="hr">
    <div class="main">
      <div>
        <a-space>
          <h2>系统管理</h2>
          <a-button type="primary" @click="showModal1" > 添加资讯 </a-button>
          <a-button type="primary"  @click="() => showModal('add')"> 添加职位 </a-button>
        </a-space>
        <div>
          <a-modal v-model="visible" title="添加职位" @ok="handleOk">
            <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" >
              <a-form-item label="工作城市">
                <a-input
                  v-decorator="['city', { rules: [{ required: true, message: '请输入工作地点!' }] }]"
                />
              </a-form-item>
              <a-form-item label="工作地点">
                <a-input
                  v-decorator="['address', { rules: [{ required: true, message: '请输入工作地点!' }] }]"
                />
              </a-form-item>
              <a-form-item label="职位名">
                <a-input
                  v-decorator="['jobName', { rules: [{ required: true, message: '请输入职位名!' }] }]"
                />
              </a-form-item>
              <a-form-item label="招聘数量">
                <a-input-number
                  
                  v-decorator="['jobNum', { rules: [{ required: true, message: '请输入招聘数量!' }] }]"
                />
              </a-form-item>
              <a-form-item label="最小工资">
                <a-input-number
                  v-decorator="['minWage', { rules: [{ required: true, message: '请输入最小工资!' }] }]"
                />
              </a-form-item>
              <a-form-item label="最大工资">
                <a-input-number
   
                  v-decorator="['maxWage', { rules: [{ required: true, message: '请输入最大工资!' }] }]"
                />
              </a-form-item>
              <a-form-item label="福利">
                <a-select v-decorator="['tags', { rules: [{ required: true, message: '请输入福利!' }] }]" mode="tags" style="width: 100%" placeholder="Tags Mode" >
                  <a-select-option key="五险一金">五险一金</a-select-option>
                  <a-select-option key="定期体检">定期体检</a-select-option>
                  <a-select-option key="假日基金">假日基金</a-select-option>
                  <a-select-option key="定期团建">定期团建</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label='职位简介'>
                <a-textarea
                  v-decorator="['desc',  { rules: [{ required: true, message: '请输入简介!' }] }]"
                  placeholder="公司简介"
                  :row='4'
                >
                </a-textarea>
              </a-form-item>
            </a-form>
          </a-modal>
          <a-modal v-model="visible1" title="添加资讯" @ok="handleOk1">
            <a-form :form="form1" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }"  @submit="handleSubmit">
              <a-form-item label='标题' >
                <a-input
                  v-decorator="['title', { rules: [{ required: true, message: '请输入标题!' }] }]"
                  placeholder="标题"
                />
              </a-form-item>
              <a-form-item label='内容' >
                <a-textarea
                  v-decorator="['content', { rules: [{ required: true, message: '请输入内容!' }] }]"
                  placeholder="内容"
                />
              </a-form-item>
            </a-form>
          </a-modal>
        </div>
      </div>
      <div class="content">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="职位">
            <a-table  :pagination="pagination" @change="fanye" :columns="columns1" :data-source="jobs" rowKey="id">
              <span slot="tags" slot-scope="tags">
                <a-tag v-for="(tag, i) of tags.split(',')" :key="i">
                  {{ tag.toUpperCase() }}
                </a-tag>
              </span>
              <span slot="state" slot-scope="state">
                {{JOBSTATE[state]}}
              </span>
              <template slot="operation" slot-scope="text, record">
                <a-space>
                  <a-popconfirm
                    v-if="jobs.length"
                    title="确定要删除?"
                    @confirm="() => onDelete(record)"
                  >
                    <a href="javascript:;" style="color: red ">删除职位</a>
                  </a-popconfirm>
                  <a-popconfirm
                    v-if="record.state==='active'"
                    title="确定要关闭职位?"
                    @confirm="() => onClose(record)"
                  >
                    <a href="javascript:;">关闭职位</a>
                  </a-popconfirm>
                  <a-popconfirm
                    v-else-if="record.state==='inactive'"
                    title="确定要开启职位?"
                    @confirm="() => onOpen(record)"
                  >
                    <a href="javascript:;">开启职位</a>
                  </a-popconfirm>
                  <a-popconfirm
                    v-else-if="record.state==='approving'"
                    title="确定要取消开启?"
                    @confirm="() => onClose(record)"
                  >
                    <a href="javascript:;">开启中...</a>
                  </a-popconfirm>
                   <a href="javascript:;" @click="() => showModal('update', record)" >修改职位</a>
                </a-space>
              </template>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="2" tab="资讯管理">
            <a-table  :pagination="pagination2" @change="fanye2"  :columns="columns3" :data-source="newsList" rowKey="id">
              <template slot="operation" slot-scope="text, record">
                <a-space>
                  <a-popconfirm
                    v-if="newsList.length"
                    title="确定要删除?"
                    @confirm="() => newsDelete(record)"
                  >
                    <a href="javascript:;" style="color: red ">删除资讯</a>
                  </a-popconfirm>
                  <a-popconfirm
                    v-if="newsList.length"
                    title="确定要关闭?"
                    @confirm="() => newsClose(record)"
                  >
                    <a href="javascript:;" >关闭资讯</a>
                  </a-popconfirm>
                  <a-popconfirm
                    v-if="newsList.length"
                    title="确定开启进入审批?"
                    @confirm="() => newsOpen(record)"
                  >
                    <a href="javascript:;" >开启资讯</a>
                  </a-popconfirm>
                </a-space>
              </template>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="3" tab="员工列表">
            <a-table  :pagination="pagination3" @change="fanye3"  :columns="columns2" :data-source="users" rowKey="id">
              <span slot="sex" slot-scope="sex">
                {{sex === 'man'? "男" : "女"}}
              </span>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="4" tab="简历管理">
            <a-table  :pagination="pagination4" @change="fanye4"  :columns="columns4" rowKey="id" :data-source="CV">
              <template slot="operation" slot-scope="text, record">
                <a :href="`api/v1/cv/getFile?path=${record.path}`" :download="record.filename">下载简历</a>
              </template>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import "./styles.less";

const columns1 = [
  { title: "职位名称", dataIndex: "jobName", key: "1" },
  { title: "工作地点", dataIndex: "city", key: "2" },
  { title: "招聘数量", dataIndex: "jobNum", key: "6" },
  { title: "最小工资", dataIndex: "minWage", key: "3" },
  { title: "最大工资", dataIndex: "maxWage", key: "4" },
  { title: "福利", dataIndex: "tags", scopedSlots: { customRender: "tags" }},
  { title: "职位状态", dataIndex:"state", scopedSlots: { customRender: "state" }},
  { title: "操作", key: "operation", scopedSlots: { customRender: "operation" }},
];

const columns2 = [
  { title: "用户邮箱", dataIndex: "email", key: "1" },
  { title: "用户名称", dataIndex: "name", key: "2" },
  { title: "用户职位", dataIndex: "position", key: "3" },
  { title: "用户性别", dataIndex: "sex",scopedSlots: { customRender: "sex" }},
  { title: "用户手机号", dataIndex: "phone", key: "5" },
];

const columns3 = [
  { title: "标题", dataIndex: "title", key: "1" },
  { title: "作者", dataIndex: "username", key: "2" },
  { title: "更新时间", dataIndex: "UpdatedAt", key: "3" },
  {title: "状态", dataIndex: "state", key: "4"},
 { title: "操作", key: "operation", scopedSlots: { customRender: "operation" }},
];

const columns4 = [
  { title: "姓名", dataIndex: "username", key: "1" },
  { title: "职位", dataIndex: "jobName", key: "2" },
  { title: "简历名称", dataIndex: "filename", key: "3" },
 { title: "操作", key: "operation", scopedSlots: { customRender: "operation" }},
];
import jobAPI from "../../services/job";
import userAPI from "../../services/user";
import newsAPI from "../../services/news";
import { requestWrapper } from "../../utils/request";
import { JOBSTATE } from '../../const/const';
export default {
  data() {
    return {
      columns1,
      columns2,
      columns3,
      columns4,
      JOBSTATE,
      jobs: [],
      users: [],
      total: 0,
      pageSize: 0,
      page: 0,
      visible: false,
      action: '',
      updateId:'',
      visible1: false ,
      form: this.$form.createForm(this, { name: 'coordinated' }),
      form1: this.$form.createForm(this, { name: 'coordinated1' }),
      newsList: [],
      CV:[],
      pagination: {pageSize:10, page: 1, total: 0},
      pagination2: {pageSize:10, page: 1, total: 0},
      pagination3: {pageSize:10, page: 1, total: 0},
      pagination4: {pageSize:10, page: 1, total: 0},
    };
  },
  methods: {
    getNewsList(parms) {
      requestWrapper( newsAPI.getNewsListByUser.bind(null, parms), {
      }).then((res) => {
        this.newsList = res.list
        this.pagination2.pageSize = res.pageSize;
        this.pagination2.page = res.page;
        this.pagination2.total = res.total;
      })
    },
    newsDelete(record){
      requestWrapper(newsAPI.newsDelete.bind(null,record.id),{
        formatDataFn: (res) => res,
          autoSuccess: true,
          successMessage: '删除成功！',
      }).then((res) => {
          this.getNewsList()
      });
    },
    newsClose(record){
      console.log(record.id);
      requestWrapper(newsAPI.newsClose.bind(null,record.id),{
        formatDataFn: (res) => res,
          autoSuccess: true,
          successMessage: '删除成功！',
      }).then((res) => {
          this.getNewsList()
      });
    },
    newsOpen(record){
      console.log(record.id)
       requestWrapper(newsAPI.newsOpen.bind(null,record.id),{
        formatDataFn: (res) => res,
          autoSuccess: true,
          successMessage: '开启成功！',
      }).then((res) => {
          this.getNewsList()
      });
    },
    onDelete(record) {
      requestWrapper(jobAPI.jobDelete.bind(null,record.id),{
        formatDataFn: (res) => res,
          autoSuccess: true,
          successMessage: '删除成功！',
      }).then((res) => {
          this.getJobs()
      });
    },
    onClose(record) {
      requestWrapper(jobAPI.jobClose.bind(null,record.id),{
        formatDataFn: (res) => res,
          autoSuccess: true,
          successMessage: '关闭成功！',
      }).then((res) => {
          this.getJobs()
      });
    },
    onOpen(record) {
      requestWrapper(jobAPI.jobOpen.bind(null,record.id),{
        formatDataFn: (res) => res,
          autoSuccess: true,
          successMessage: '开启成功！',
      }).then((res) => {
          this.getJobs()
      });
    },
    getJobs(param) {
      requestWrapper(jobAPI.jobsByComp.bind(null, param), {
        formatDataFn: (res) => res,
      }).then((res) => {
        console.log(res);
        this.jobs = res.result.list;
        this.pagination.pageSize = res.result.pageSize;
        this.pagination.page = res.result.page;
        this.pagination.total = res.result.total;
      });
    },
    showModal(v, record) {
      this.visible = true;
      if(v === 'update') {
        this.action = v
        this.updateId = record.id
        let obj = record
        setTimeout(() => {
          this.form.setFieldsValue(obj)
        }, 100);
      } else {
        console.log(v);
        this.action = v
        this.form.resetFields()
      }
    },
    showModal1() {
      this.visible1 = true;
    },
    handleOk1(e) {
      this.handleSubmit1(e);
    },
    handleSubmit1(e) {
      e.preventDefault();
      this.form1.validateFields((err, values) => {
        if (!err) {
          console.log(values);
          requestWrapper( newsAPI.createNew.bind(null, values), {
              autoSuccess: true,
              successMessage: '添加成功！',
          }).then((res) => {
            this.getNewsList()
            this.visible1 = false;
            this.form1.resetFields()
          })
        }
      });
    },
    handleOk(e) {
      if(this.action === 'add'){
        console.log("add");
        this.handleSubmit(e);
      }else {
        console.log("no add");
        this.jobUpdate(e)
      }
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values);
          values.jobNum = values.jobNum+''
          requestWrapper(jobAPI.jobCreate.bind(null,values),{
            autoSuccess: true,
            formatDataFn: res => res,
          }).then((res) => {
            this.getJobs()
            this.visible = false;
          })
        }
      });
    },
    jobUpdate(e){
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log( this.updateId);
          values.tags = values.tags.split(',')
          requestWrapper(jobAPI.jobUpdate.bind(null, this.updateId, values),{
            autoSuccess: true,
            successMessage: '修改成功！',
            formatDataFn: res => res,
          }).then((res) => {
            this.getJobs()
            this.visible = false;
          })
        }
      });
    },
    getCV(parms){
      requestWrapper(jobAPI.getCV.bind(null, parms),{
        formatDataFn: res => res,
      }).then((res) => {
        this.CV =res.result.list
        this.pagination4.pageSize = res.result.pageSize;
        this.pagination4.page = res.result.page;
        this.pagination4.total = res.result.total;
      })
    },
    getUser(parms){
      requestWrapper(userAPI.getCompUser.bind(null, parms), {
        formatDataFn: (res) => res,
      }).then((res) => {
        console.log(res);
        this.users=res.result
        // this.pagination3 = res.result.pageSize;
        // this.pagination3.page = res.result.page;
        // this.pagination3.total = res.result.total;
      });
    },
    fanye(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.getJobs({
        pageSize: pagination.pageSize,
        page: pagination.current,
      });
    },
    fanye2(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.getNewsList({
        pageSize: pagination.pageSize,
        page: pagination.current,
      });
    },
    fanye3(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.getUser({
        pageSize: pagination.pageSize,
        page: pagination.current,
      });
    },
    fanye4(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.getCV({
        pageSize: pagination.pageSize,
        page: pagination.current,
      });
    },
  },
  mounted() {
    this.getJobs();
    this.getNewsList();
    this.getCV()
    this.getUser()

  },
};
</script>
